import { Component } from "react";


class App extends Component {
    state = {
        items: [],
        isLoading: true,
        isError: false
    }
    render() {
        if (this.state.isError) {
            return (<h3>网络连接错误。。。请稍后重试</h3>)
        } else {
            if (this.state.isLoading) {
                return (<h3>正在加载中。。。</h3>)
            } else {
                return (
                    this.state.items.map((value) => {
                        return (
                            <div key={value.id}>
                                <p>{value.name}</p>
                            </div>
                        )
                    })
                )
            }
        }
    }
    getData() {
        try {
            this.$axios.get('data.json').then(
                (value) => {
                    this.setState({
                        items: value.items,
                        isLoading:false
                    })
                }
            )
        } catch (error) {
            this.setState({
                isError: true
            })
        }

    }
    componentDidMount() {
        this.getData()
    }
}
export default App